<template>
  <div class="dialog" v-show="showMask">
    <div class="dialog-container">
      <div class="btns">
        <div class="setting-btn" @click="settingBtn">{{ settingText }}</div>
        <div class="update-btn" @click="updateBtn">{{ updateText }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {},
    // 类型包括 defalut 默认， danger 危险， confirm 确认，
    type: {
      type: String,
      default: "default",
    },
    content: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    settingText: {
      type: String,
      default: "设备设置",
    },
    updateText: {
      type: String,
      default: "固件升级",
    },
    confirmText: {
      type: String,
      default: "确认",
    },
  },
  data() {
    return {
      showMask: false,
    };
  },
  methods: {
    closeMask() {
      this.showMask = false;
    },
    settingBtn() {
      this.$emit("setting");
      this.closeMask();
    },
    updateBtn() {
      this.$emit("update");
      this.closeMask();
    },
  },
  mounted() {
    this.showMask = this.value;
  },
  watch: {
    value(newVal, oldVal) {
      this.showMask = newVal;
    },
    showMask(val) {
      this.$emit("input", val);
    },
  },
};
</script>
<style lang="less" scoped>
.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
  .dialog-container {
    width: 120px;
    height: 96px;
    position: absolute;
    top: 10%;
    left: 60%;
    position: relative;
    .btns {
      width: 100%;
      height: 96px;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      .setting-btn {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
        height: 48px;
        width: 100%;
        color: rgba(0, 0, 0, 0.9);
        background: rgba(0, 0, 0, 0.05);
        &:active {
          background: rgba(0, 0, 0, 0.01);
        }
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .update-btn {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);
        height: 48px;
        width: 100%;
        color: rgba(0, 0, 0, 0.9);
        background: rgba(255, 255, 255, 1);
        &:active {
          background: rgba(0, 0, 0, 0.1);
        }
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
    }
    .close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      cursor: pointer;
      &:hover {
        font-weight: 600;
      }
    }
  }
}
</style>
